<template>
  <div class="my_msg">
    <div class="title">
      <van-icon name="arrow-left" size="0.33rem" @click="return_home" />
      <span>个人信息</span>
    </div>

    <ul>
      <li>
        <span>头像</span>
        <div>
          <!-- <van-uploader v-model="fileList" multiple /> -->
          <img :src="url" />
          <van-icon name="arrow" size="0.33rem" @click="showPopup2" />
        </div>
      </li>

      <li>
        <span>账号</span>
        <span>{{ this.$store.state.user.username }}</span>
      </li>

      <li>
        <span>姓名</span>

        <span>{{ this.$store.state.user.name }}</span>
      </li>

      <li>
        <span>证件</span>

        <span>证件号</span>
      </li>

      <li>
        <span>{{ idType() }}</span>

        <span>{{ idNumber() }}</span>
      </li>

      <li>
        <span>手机号</span>

        <span>{{ this.$store.state.user.phoneNum }}</span>
      </li>

      <van-popup :style="{ width: '80%', height: '25%', padding: '10px' }" v-model="show2">
        <van-form @submit="onSubmit2" class="log" v-model="form">
          <van-uploader  multiple :max-count="1" :after-read="afterRead" preview-size="100" >
            <van-image width="100" height="100" v-model="headPic" :src="headPic" />
            <!-- <van-icon name="plus" size='60px'/> -->
          </van-uploader>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }">
            确定修改</van-button>
        </van-form>
      </van-popup>
    </ul>

    <p>
      <img src="./also.png" />
      手机号变更需本人携带身份证到门店办理
    </p>
    <div>
      <button @click="outlogin">退出登录</button>
    </div>
  </div>
</template>

<script>
import { uploadImg,uploadImgMember } from "../../request/userinfo/userinfo";
import { ref } from "vue";
export default {
  props: {},

  data() {
    return {
      url: this.$store.state.user.headPic,
      show: false,
      headPic: '',
      imgFile:[],
      show2: false,
      list: [],
      imgurl: this.$store.state.user.headPic,
      nickName: "",
      avatar: "",
      form: "",
    };
  },
  mounted() { },
  methods: {
    onSubmit2() {
      uploadImgMember(
              {id:this.$store.state.user.id,headPic:this.headPic}
              ).then((res) => {
        if (res.code == 2000) {
            this.$toast.fail("成功修改");
            this.show2 = false;
            this.headPic=this.$store.state.user.headPic;
              this.$router.push("/banner")
        } else {
          alert(res.message);
        }
      });
    },
    showPopup2() {
      this.show2 = true;
      this.headPic=this.$store.state.user.headPic;
    },
    afterRead(file) {
       let data = new FormData();
       data.append("imgFile", file.file);
      uploadImg(
        data
      ).then((res) => {
        if (res.code == 2000) {
          this.headPic=res.data;
          this.$toast.fail("成功上传");
        } else {
          alert(res.message);
        }
      });
      // this.$http.post("/system/api/user/upload",file.file).then(resp=>{
      //   console.log(resp);
      // })
    },
    outlogin() {
      this.$router.push("/login");
      localStorage.removeItem("token");
    },
    return_home() {
      this.$router.go(-1);
    },
    idNumber() {
      if (this.$store.state.user.idCard) {
        let str = this.$store.state.user.idCard;
        return str.substr(0, 5) + "*********" + str.substr(-3);
      } else {
        return "";
      }
    },
    idType() {
      let idTypeNum = this.$store.state.user.idType;
      switch (idTypeNum) {
        case "1":
          return "身份证";
        case "2":
          return "护照";
        case "3":
          return "军官证";
        case "4":
          return "台胞证";
        case "5":
          return "港澳台来往内地通行证";
        default:
          return "其他证件";
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
h5 {
  text-align: center;
}

.img {
  text-align: center;
}

.log {
  text-align: center;
}

.iag {
  padding: 0 30px;
}

.my_msg {
  .title {
    padding: 0 0.24rem;
    display: flex;
    align-items: center;
    height: 0.88rem;
    box-shadow: 0 0.06rem #f3f3f3;

    span {
      flex: 1;
      text-align: center;
      font-size: 0.34rem;
    }
  }

  ul {
    font-size: 0.27rem;
    margin-bottom: 0.38rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.24rem;
      height: 0.99rem;
      border-bottom: 1px solid #e0e0e0;

      div {
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.21rem;
        }
      }
    }
  }

  p {
    img {
      width: 0.2rem;
      height: 0.2rem;
    }

    padding: 0 0.24rem;
    text-align: right;
    font-size: 0.17rem;
    color: #b3b3b3;
    margin-bottom: 1rem;
  }

  div {
    text-align: center;

    button {
      width: 5rem;
      height: 1rem;
      color: #fff;
      font-size: 0.36rem;
      text-align: center;
      line-height: 1rem;
      background: #3d88f7;
      border: none;
      outline: none;
      border-radius: 0.09rem;
    }
  }

}
</style>
